<template>
  <div>
  <Modal
            class="model"
            v-model="model"
            @on-ok="handleOk"
            @on-cancel="handleCancel"
            title="回访详细"
            :mask-closable="false"
            width="80%"
        >
            <Row>
                <Col span="6" class="side-bg">
                    <div class="basic">
                        <h3>颜如玉 21 女</h3>
                        <h4 class="b-phone">
                            手机号：13585687575
                            <span>诊疗号：2350265</span>
                        </h4>
                    </div>
                    <div class="sky-screen">
                        <row>
                            <Col span="16">
                                <DatePicker type="daterange" placeholder="回访日期"></DatePicker>
                            </Col>
                            <Col span="8">
                                <Select v-model="formItem.select">
                                    <Option value="全部">全部</Option>
                                    <Option value="医助">医助</Option>
                                    <Option value="客服">客服</Option>
                                </Select>
                            </Col>
                        </row>
                    </div>
                    <Divider />
                    <Timeline>
                        <TimelineItem>
                            <p class="time">2019-10-21 11:59</p>
                            <p class="content">告知普查名额这两天还有 想下午过来看看 2点左右 血液0元 CT 0元</p>
                            <p class="consultant">
                                医助
                                <span class="c-inr">王语文</span>
                                <Badge status="success" text="已到院" />
                            </p>
                        </TimelineItem>
                        <TimelineItem>
                            <p class="time">2019-10-18 11:59</p>
                            <p class="content">问我普查名额怎么申请 想过来看看</p>
                            <p class="consultant">
                                客服
                                <span class="c-inr">王语文</span>
                                <Badge status="processing" text="继续回访" />
                            </p>
                        </TimelineItem>
                        <TimelineItem>
                            <p class="time">2019-10-16 11:59</p>
                            <p class="content">平时7点下班，也没有休息天，想过段时间再看，推了全免检查到31号，手机短信发地址， 一直说谢谢，希望比较小</p>
                            <p class="consultant">
                                医助
                                <span class="c-inr">王语文</span>
                                <Badge status="warning" text="未接通/未回复" />
                            </p>
                        </TimelineItem>
                        <TimelineItem>
                            <p class="time">2019-09-21 11:59</p>
                            <p class="content">问我普查名额怎么申请 想过来看看</p>
                            <p class="consultant">
                                客服
                                <span class="c-inr">王语文</span>
                                <Badge status="processing" text="继续回访" />
                            </p>
                        </TimelineItem>
                    </Timeline>
                </Col>
                <Col span="18">
                    <div class="title">回访信息</div>
                    <Divider />
                    <Form :model="formItem" :label-width="118" class="return-form">
                        <FormItem label="回访状态" required>
                            <RadioGroup v-model="formItem.radio">
                                <Radio label="未接通">未接通</Radio>
                                <Radio label="微信拉黑">微信拉黑</Radio>
                                <Radio label="正常回访">正常回访</Radio>
                                <Radio label="已到院">已到院</Radio>
                            </RadioGroup>
                        </FormItem>
                        <FormItem label="回访方式" required>
                            <RadioGroup v-model="formItem.radios">
                                <Radio label="电话">电话</Radio>
                                <Radio label="微信">微信</Radio>
                                <Radio label="QQ">QQ</Radio>
                                <Radio label="其它">其它</Radio>
                            </RadioGroup>
                        </FormItem>
                        <FormItem label="回访内容" required>
                            <Input
                                v-model="formItem.textarea"
                                type="textarea"
                                :autosize="{minRows: 2,maxRows: 5}"
                                placeholder="请输入回访内容"
                            ></Input>
                        </FormItem>
                         <FormItem label="标签" required>
                            <Select v-model="model7" filterable multiple>>
                                <OptionGroup label="营销">
                                    <Option v-for="item in cityList1" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                </OptionGroup>
                                <OptionGroup label="活动">
                                    <Option v-for="item in cityList2" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                </OptionGroup>
                            </Select>
                        </FormItem>
                        <FormItem label="效果类型" required>
                            <RadioGroup v-model="formItem.radios">
                                <Radio label="无效">无效</Radio>
                                <Radio label="扩散">扩散</Radio>
                                <Radio label="见效-10%">见效-10%</Radio>
                                <Radio label="显效-50%">显效-50%</Radio>
                                <Radio label="治愈-90%">治愈-90%</Radio>
                                <Radio label="复发">复发</Radio>
                            </RadioGroup>
                        </FormItem>
                        <FormItem label="风控类型" required>
                            <RadioGroup v-model="formItem.risk">
                                <Radio label="正常">正常</Radio>
                                <Radio label="敏感">敏感</Radio>
                                <Radio label="黑名单">黑名单</Radio>
                                <Radio label="领导介绍">领导介绍</Radio>
                                <Radio label="退费患者">退费患者</Radio>
                            </RadioGroup>
                        </FormItem>
                        <!-- <FormItem label="就诊类型">
                            <Select v-model="formItem.select" style="width:190px" disabled>
                                <Option value="正常">正常</Option>
                                <Option value="继续回访">继续回访</Option>
                                <Option value="预约">预约</Option>
                            </Select>
                        </FormItem> -->
                        <FormItem v-if="formItem.risk !== '黑名单'" label="下次回访时间" required>
                            <Row :gutter="16">
                                <Col span="2"><Input v-model="formItem.input1" /></Col>
                                <Col span="2">天后</Col>
                                <Col span="8">
                                    <DatePicker
                                    type="datetime"
                                    placeholder="回访时间"
                                    v-model="formItem.date" >
                                    </DatePicker>
                                </Col>
                            </Row>
                        </FormItem>
                        <FormItem label="下次复诊时间">
                               <Row :gutter="16">
                                <Col span="2"><Input v-model="formItem.input2" /></Col>
                                <Col span="2">天后</Col>
                                <Col span="8">
                                    <DatePicker
                                    type="datetime"
                                    placeholder="复诊时间"
                                    v-model="formItem.date1" >
                                    </DatePicker>
                                </Col>
                            </Row>
                        </FormItem>
                    </Form>
                </Col>
            </Row>
        </Modal>
  </div>
</template>
<script>
    export default {
        name: 'returnVisit',
        data () {
            return {
                model: false,
                model7: '',
                formItem: {
                    input: '',
                    input1: '',
                    input2: '',
                    select: '',
                    radio: '正常回访',
                    radios: '电话',
                    risk: '',
                    checkbox: [],
                    date: '',
                    date1: '',
                    time: '',
                    desc: '',
                    textarea: ''
                },
                cityList1: [
                    {
                        value: '复诊',
                        label: '复诊'
                    },
                    {
                        value: '专家',
                        label: '专家'
                    },
                    {
                        value: '权威',
                        label: '权威'
                    }
                ],
                cityList2: [
                    {
                        value: '优惠',
                        label: '惠折'
                    },
                    {
                        value: '折扣',
                        label: '折扣'
                    },
                    {
                        value: '援助活动',
                        label: '援助活动'
                    }
                ]
            }
        },
        methods: {
            handleReturnVisit () {
                this.model = true;
            },
            handleCancel () {
                this.model = false;
            },
            handleOk () {
                this.model = false;
                this.$Message.success('回访成功');
            }
        }
    }
</script>
<style scoped>
.time {
    font-size: 14px;
    font-weight: bold;
}
.content {
    padding: 10px 0;
}
.consultant {
    color: #9ea7b4;
}
.c-inr {
    margin: 0 10px;
}
h4 span {
    margin-left: 5px;
}
.side-bg {
    background: #f2f2f2;
    padding: 24px !important;
}
.return-form {
    padding: 24px;
}
.title {
    font-weight: bold;
    font-size: 16px;
    padding: 24px 0 0 24px;
}
.sky-screen {
    margin-top: 16px;
}
.sky-s1 {
    font-size: 14px;
    margin: 0 16px;
    color: #666;
}
.sky-s2 {
    font-size: 12px;
    margin-right: 10px;
    color: #888;
}
.sky-note {
    padding: 5px 0;
}
</style>
<style>
.model .ivu-modal-body {
    padding: 0px;
}
</style>
